<template>
  <el-dialog :visible.sync="dialogFormVisible" width="800px" @close="close">
    <el-row :gutter="12">
      <el-col :span="12">
        <el-card class="box-card card1" :model="form">
          <template #header><span class="spans">认证信息</span></template>
          <div>姓名:{{ form.truename }}</div>
          <div>类型:{{ form.type_text }}</div>
          <div>学校:{{ form.school }}</div>
          <div>学号:{{ form.student_no }}</div>
          <div>入学年份:{{ form.year }}</div>
          <div>上传凭证:{{ form.name }}</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card car2">
          <template #header><span class="spans">认证结果</span></template>
          <!-- 这个ref和下边的close、save中的refs都需要对应form必须是表单中的 -->
          <el-form ref="form">
            <el-form-item>
              <el-select v-model="form1.v1" placeholder="认证状态">
                <el-option
                  v-for="item in options"
                  :key="item.is_card_certified"
                  :label="item.label"
                  :value="item.is_card_certified"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="form1.v2"
                placeholder="认证过期时间"
                type="date"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form1.v3"
                placeholder="请输入内容"
                :rows="2"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { getStudent } from '@/api/shouye'
  export default {
    data() {
      return {
        dialogFormVisible: false,
        form: {
          truename: '',
          type_text: '',
          school: '',
          student_no: '',
          year: '',
          name: '',
        },
        form1: {},
        options: [
          { label: '全部', is_card_certified: '' },
          { label: '已认证', is_card_certified: '1' },
          { label: '未认证', is_card_certified: '0' },
        ],
      }
    },
    created() {},
    // 目前不能把数据传给数据库实现真正更改数据
    methods: {
      // 框架封装好的可以直接拿到当前行的数据
      showEdit(row) {
        console.log(row, 'row的内容')
        this.form = row
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg } = await getStudent(this.form)
            this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          }
        })
      },
    },
  }
</script>

<style scoped>
  .el-dialog__body {
    display: flex;
  }
  .spans {
    font-size: 16px;
    font-weight: 400px;
  }
  .card1 div {
    margin: 10px 0 20px 40px;
  }
</style>
